<template>
  <div class="contain">
    <div class="con-left">
      <div class="play">
        <router-link to="/game">
          <img src="./begin.gif" />
        </router-link>
      </div>
      <div class="con-z-bottom">
        <div class="register">
          <i class="user-icon"></i>
          <a href>账号注册</a>
        </div>
        <em class="content-icon"></em>
        <div class="xinSh">
          <i class="user-icon"></i>
          <a href>新手引导</a>
        </div>
      </div>
    </div>
    <div class="con-mid">
      <div class="lun-boNav">
        <ul class="lb-image">
          <li v-for="(item,index) in lbImage">
            <a @click="xiangqingClick(index)">
              <img :src="item.imageUrl" :alt="item.title" />
            </a>
          </li>
        </ul>
      </div>
      <div class="lb-page">
        <ul id="lb-list">
          <li
            :class="{'page-on':pageIndex==index}"
            v-for="(item,index) in lbImage"
            :key="index"
            @click="sayEvent(index)"
          >{{item.title}}</li>
        </ul>
      </div>
    </div>
    <div class="con-right">
      <div class="c-r-top">
        <img />
      </div>
      <div class="c-r-bottom">
        <img />
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "http";
export default {
  name: "shuffling",
  props: {},
  data() {
    return {
      lbImage: [
        {
          imageUrl: require("./lb1.png"),
          title: "伊人皎皎",
          text: "[十周年][活动] 6.28-7.4 夏至已至 伊人皎皎收藏册上齐！"
        },
        {
          imageUrl: require("./lb2.jpg"),
          title: "全服福利",
          text: "[十周年][活动]6.14-6.27 逐鹿收藏册、张琪瑛上线 壕将“琪”福返场"
        },
        {
          imageUrl: require("./lb3.jpg"),
          title: "琪福来袭",
          text: "[十周年][活动]6.14-6.27 逐鹿收藏册、张琪瑛上线 壕将“琪”福返场"
        },
        {
          imageUrl: require("./lb4.jpg"),
          title: "同人征集",
          text: "【社区活动】三国杀原创作品，社区投稿登记处"
        },
        { imageUrl: require("./lb5.png"), title: "精彩活动", text: "活动中心" }
      ],
      lbTime: "",
      pageIndex: 0,
      navListDom: "",
      lbListImageDom: "",
      wenZBreadcrumb: {
        trail1: {
          path: "/",
          text: "官网首页"
        },
        trail2: ""
      }
    };
  },
  mounted() {
    this.lbListImageDom = document.getElementsByClassName("lun-boNav")[0];
    this.navListDom = document.getElementById("lb-list");
    this.lbTime = setInterval(() => {
      this.ON(740, this.pageIndex + 1);
    }, 3000);
    for (let i = 0; this.lbImage.length < i; i++) {
      const item = this.lbImage[i];
      console.log(item);
    }
  },
  methods: {
    // 底部导航栏的点击事件
    sayEvent(index) {
      this.pageIndex = index;
      this.lbListImageDom.style.left = "-" + 740 * this.pageIndex + "px";
      clearInterval(this.lbTime);
      this.lbTime = setInterval(() => {
        this.ON(740, this.pageIndex + 1);
      }, 3000);
    },
    ON() {
      if (this.pageIndex > 3) {
        this.pageIndex = 0;
        this.lbListImageDom.style.left = "0px";
        return;
      }
      // 导航栏自动切换特效
      this.pageIndex++;
      this.lbListImageDom.style.left = "-" + 740 * this.pageIndex + "px";
    },
    xiangqingClick(i) {
      let trail2Text = {
        path: "tabList",
        text: "游戏公告",
        children: { text: "游戏中心" }
      };
      if (i == 4) {
        trail2Text = {
          path: "activity",
          text: "活动中心",
          children: {
            text: "活动列表"
          }
        };
        this.wenZBreadcrumb.trail2 = trail2Text;
        this.$router.push({
          path: "/activity",
          query: this.wenZBreadcrumb
        });
        return;
      }
      this.wenZBreadcrumb.trail2 = trail2Text;
      this.$router.push({
        path: "/wenZ/details",
        query: { title: this.lbImage[i].text, breadcrumb: this.wenZBreadcrumb }
      });
    }
  }
};
</script>
<style scoped>
.con-left {
  margin-right: 15px;
}

.con-left .con-z-bottom {
  padding: 15px;
  text-align: center;
  background: #fff;
}

.con-left .con-z-bottom .content-icon {
  margin: 0 auto;
  background-position: 290px 50px;
}

.con-left .con-z-bottom .register .user-icon {
  background-position: -466px -359px;
}

.con-left .con-z-bottom .xinSh .user-icon {
  background-position: -466px -331px;
}

.con-left .con-z-bottom .register i,
.con-left .con-z-bottom .xinSh i {
  -webkit-transition: margin-bottom 0.3s;
  transition: margin-bottom 0.3s;
}

.con-left .con-z-bottom .register:hover i,
.con-left .con-z-bottom .xinSh:hover i {
  margin-bottom: 10px;
}

.con-left .con-z-bottom a {
  font-size: 1.2em;
  font-weight: 1000;
  font-family: "仿宋";
  line-height: 50px;
}
</style>
